<template>
    <div class="addAddress">
        <van-nav-bar title="新增收货地址" left-arrow @click-left="$router.go(-1)" />
        <div class="label">收货地址</div>
        <div class="form-address">
            <!-- <van-address-edit
                :area-list="areaList"
                @save="onSave"
                @delete="onDelete"
            /> -->
            <van-form validate-first @failed="onFailed">
                <!-- 通过 pattern 进行正则校验 -->
                <van-field
                    v-model="value1"
                    name="pattern"
                    label="姓名"
                    placeholder="请输入收货人姓名"
                />
                <!-- 通过 validator 进行函数校验 -->
                <van-field
                    v-model="value2"
                    name="validator"
                    label="电话"
                    placeholder="请输入收货人手机号"
                    :rules="[{ validator, message: '请输入正确手机号' }]"
                />
                <!-- 通过 validator 进行异步函数校验 -->
                <van-field
                    v-model="value3"
                    name="asyncValidator"
                    label="地区"
                    placeholder="请选择省/市/县"
                    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
                />
                <van-field
                    v-model="value3"
                    name="asyncValidator"
                    label="详细地址"
                    placeholder="街道门牌、楼层等信息"
                    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" color="#f9211c" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
// import { areaList } from '@vant/area-data'
export default {
  data () {
    return {
    //   areaList,
    //   searchResult: []
        value1: '',
        value2: '',
        value3: '',
        pattern: /\d{6}/
    }
  },
  methods: {
    // onSave (context) {
    //   this.$toast('save')
    //   console.log(context)
    // },
    // onDelete () {
    //     this.$toast('delete')
    // }
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator (val) {
      return /1\d{10}/.test(val)
    },
    // 异步校验函数返回 Promise
    asyncValidator (val) {
      return new Promise((resolve) => {
        this.$toast.loading('验证中...')

        setTimeout(() => {
          this.$toast.clear()
          resolve(/\d{6}/.test(val))
        }, 1000)
      })
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    }
  }
}
</script>

<style lang="less" scoped>
.addAddress {
    background-color: #f6f6f6;
    .label {
        color: #455A6499;
        padding: 20px 0 0 20px;
    }
    .form-address {
        height: 100%;
        width: 94%;
        margin: 9px auto;
        // border: 0.5px solid #a8a8a8;
        // border-radius: 15px;
    }
}
</style>